<template>
	<view>
		<!-- 请选择报修类型 -->
		<view class="header">
			<view class="return"><text class="iconfont icon-zuo icon"></text>返回</view>
			<view class="goodrepair">问题</view>
		</view>
		<view class="center">
			<view class="content">
				<view class="types">
					<view class="typesSon">类型</view>
					<picker @change="bindPickerChange" :value="index" :range="ArrayList" range-key="name">
						<view class="pick">
							<view class="typesSons">{{index!==''?ArrayList[index].name:'请选择问题类型'}}</view>
							<text class="iconfont icon-right-1-copy icon"></text>
						</view>
					</picker>
				</view>
				<view class="address">
					<view class="addressSon">问题地址</view>
					<input type="text" placeholder="请输入问题地址" v-model="form.address" />
					<text class="iconfont icon-right-1-copy icon"></text>
				</view>
				<view class="tel">
					<view class="telSon">联系电话</view>
					<input type="text" placeholder="请输入问题电话" v-model="form.tel" />
					<text class="iconfont icon-right-1-copy icon"></text>
				</view>
				<view class="txt">
					<textarea placeholder-style="color:#ababab" v-model="form.content"
						placeholder="请输入反馈问题，以便维修人员尽快为您解决" />
				</view>
				<view class="upload" @click="uploadImage">
					<view class="camera">
						<text class="iconfont icon-xiangji icon"></text>
					</view>
					<view class="uploadImg" >
						<view class="img" v-for="(Url,index) in imageurls" :key="index">
							<image :src="IMGImages_Url+Url" mode=""></image>
							<view class="cha">x</view>
						</view>
					</view>
				</view>
				<view class="queren" @click="sumbit()">确认报修</view>
				<view class="box"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		questiontype,
		Addrepairs
	} from "../../apis/index.js"
	import {
		IMAGE_BASE_URL
	} from "../../config/index.js"
	export default {
		data() {
			return {
				IMGImages_Url: IMAGE_BASE_URL,
				ArrayList: [],
				index: "",
				form: {},
				imageurls: [], // 多文件上传
			}
		},
		created() {
			this.questiontype()
		},
		methods: {
			//确认保修跳转到保修列表
			async sumbit() {
				if (this.index === "") return this.$message.error("请输入报修类型")
				if (!this.form.address) return this.$message.error("请输入报修地址")
				if (!this.form.tel) return this.$message.error("请输入报修电话")
				if (!this.form.content) return this.$message.error("请输入报修的问题")
				if (!this.imageurls.length) return this.$message.error("请进行文件上传")
				this.form.images = this.imageurls.map((item)=>{
					return {url : item}
				})
				let Updatas = await Addrepairs(this.form)
				console.log("添加维修",Updatas);
				this.$message.success("添加成功")
				uni.navigateTo({
					url:"/pages/warrantyList/warrantyList"
				})
				
			},
			//文件上传
			uploadImage() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						tempFilePaths.forEach(async (item) => {
							let imageinfo = await this.$common.upload(item)
							this.imageurls.push(imageinfo.data)
							console.log('121',imageinfo);
						})
					}
				});
			},
			//获取picker中的value
			bindPickerChange: function(e) {
				console.log(e);
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				console.log(this.index);
			},
			//维修类型的值
			async questiontype() {
				let res = await questiontype()
				console.log("维修类型", res);
				this.ArrayList = res.list
			}
		}
	}
</script>

<style lang="less">
	.header {
		display: flex;
		justify-content: center;
		padding-top: 50rpx;
		padding-bottom: 40rpx;
		position: relative;

		.return {
			font-size: 30rpx;
			color: #0f0f0f;
			position: absolute;
			left: 16rpx;

			.icon {
				font-size: 35rpx;
			}
		}

		.goodrepair {
			font-size: 30rpx;
			color: #0f0f0f;
		}
	}

	.center {
		margin-left: 20rpx;
		margin-right: 20rpx;

		.content {
			.types {
				padding-top: 35rpx;
				padding-bottom: 35rpx;
				border-bottom: 2rpx solid #e9e9e9;
				// display: flex;
				justify-content: space-between;
				position: relative;

				.typesSon {
					font-size: 30rpx;
					color: #000000;
				}

				/deep/.pick {
					// display: flex !important;
					position: relative;

					.typesSons {
						font-size: 30rpx;
						color: #898989;
						position: absolute;
						right: 80rpx;
						top: -35rpx;
					}

					.icon {
						color: #898989;
						font-size: 30rpx;
						padding-right: 30rpx;
						padding-top: 8rpx;
						position: absolute;
						top: -35rpx;
						right: 0rpx;
					}
				}
			}

			.address {
				padding-top: 35rpx;
				padding-bottom: 35rpx;
				border-bottom: 2rpx solid #e9e9e9;
				display: flex;
				justify-content: space-between;
				position: relative;

				.addressSon {
					font-size: 28rpx;
					color: #000000;
				}

				input {
					font-size: 28rpx;
					color: #898989;
					position: absolute;
					right: 65rpx;
					text-align: right;
					width: 370rpx;
					// background-color: red;
				}

				.icon {
					color: #898989;
					font-size: 30rpx;
					padding-right: 30rpx;
					padding-top: 7rpx;
				}
			}

			.tel {
				padding-top: 35rpx;
				padding-bottom: 35rpx;
				display: flex;
				justify-content: space-between;
				position: relative;

				.telSon {
					font-size: 28rpx;
					color: #000000;
				}

				input {
					text-align: right;
					width: 200rpx;
					font-size: 28rpx;
					color: #898989;
					position: absolute;
					right: 62rpx;
					// background-color: red;
				}

				.icon {
					color: #898989;
					font-size: 30rpx;
					padding-right: 30rpx;
					padding-top: 7rpx;
				}
			}

			.txt {
				height: 160rpx;
				border-radius: 13rpx;
				border: 3rpx solid #c5c5c5;

				textarea {
					width: 90%;
					height: 130rpx;
					padding-top: 30rpx;
					padding-left: 25rpx;
					font-size: 25rpx;
					// background-color: pink;
				}
			}

			.upload {
				padding-top: 30rpx;
				display: flex;

				.camera {
					text-align: center;
					line-height: 100rpx;
					border: 2rpx solid #c5c5c5;
					width: 100rpx;
					height: 100rpx;
					border-radius: 15rpx;

					.icon {
						font-size: 45rpx;
						color: #898989;
					}
				}

				.uploadImg {
					padding-left: 50rpx;
					display: flex;
					flex-wrap: wrap;

					.img {
						padding-right: 35rpx;
						padding-bottom: 20rpx;
						position: relative;

						image {
							border-radius: 15rpx;
							width: 100rpx;
							height: 100rpx;
						}

						.cha {
							color: white;
							text-align: center;
							line-height: 25rpx;
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							position: absolute;
							top: -15rpx;
							right: 25rpx;
							background-color: #a3a5a8;
						}
					}
				}
			}

			.queren {
				margin-top: 100rpx;
				background-color: #1f8fff;
				margin-left: 120rpx;
				margin-right: 120rpx;
				border-radius: 50rpx;
				color: white;
				text-align: center;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				font-size: 30rpx;
			}

			.box {
				height: 180rpx;
			}
		}
	}
	// .closeView{
	// 	display: flex;
	// 	padding: 40rpx;
	// 	.ImgUrls{
	// 		width: 94rpx;
	// 		height: 94rpx;
	// 		border-radius: 11rpx;
	// 	}
	// }

</style>